<template>
    <el-container id="container_body">
      <Aside v-bind:screenHeight="screenHeight" v-bind:isCollaspse = "isCollaspse"></Aside>
      <el-container>
        <el-header>
          <LayoutHeader @Collaspse="Collaspse" v-bind:isCollaspse="isCollaspse"></LayoutHeader>
        </el-header>
        <el-main style="margin-top: 0">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
  import Aside from './aside/index'
  import LayoutHeader from './header/header'

    export default {
      name: "index",
      components:{
        Aside,
        LayoutHeader
      },
      data(){
        return {
          screenHeight: document.documentElement.clientHeight - 20,
          isCollaspse : false
        }
      },
      methods:{
        Collaspse: function (status) {
          this.isCollaspse = status;
        }
      },
      mounted(){
        //页面初始化
        document.getElementById('container_body').style.height = this.screenHeight + "px";
        window.onresize=() => {
          return (()=>{
            this.screenHeight = document.documentElement.clientHeight;
          })()
        };
        window.onload=() => {
          var asideScoll = document.getElementById('aside-scoll');
        };
      },
      watch:{
        screenHeight(val){
          this.screenHeight = val;
          //检测窗口的大小，并赋值
          document.getElementById('container_body').style.height = this.screenHeight - 20 + "px";
        }
      },
    }
</script>

<style scoped>

</style>
